<template>
  <div id="preLine">
    <div class="select-box" :class="isXiDingShow ? 'xidingselect' : ''">
      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        no-data-text="暂无数据"
        @change="provinceChange"
        v-model="preLineSelectData.selecttextDX6"
        placeholder=" "
        style="width: 90px; margin: 0 10px"
      >
        <el-option
          v-for="item in preLineSelectData.popArrDX6"
          :key="item.id"
          :label="item.provinceName"
          :value="item.provinceCode"
        />
      </el-select>
      <!-- 年份 -->
      <el-select
        no-data-text="暂无数据"
        v-model="preLineData.preLineselecttextDX6"
        placeholder=" "
        @change="yearChange"
        style="width: 90px"
      >
        <el-option
          v-for="item in preLineData.preLinepopArrDX6"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <div class="scoreline-content">
      <!-- style="height: 36px; position: sticky; top: 110px; left: 0" -->
      <div>
        <div
          :class="isXiDingShow ? 'xidingtable-title' : ''"
          class="pre-tr pre-head-tr text-center fw600 f14"
          style="top: 123px; border-top: 1px solid rgb(235, 238, 245)"
        >
          <div class="pre-td pre-td-code">代码</div>
          <div class="pre-td pre-td-name pl20">院校/专业名称</div>
          <div class="pre-td pre-td-choose" style="">计划</div>
          <div class="pre-td pre-td-plan">选科</div>
          <div class="pre-td pre-td-cose">最高分</div>
          <div class="pre-td pre-td-year">最低分</div>
          <div class="pre-td pre-td-year">最高位次</div>
          <div class="pre-td pre-td-year">最低位次</div>
        </div>
      </div>
      <div v-if="preLineList.length > 0">
        <!-- style="width: 1200px" -->
        <div class="table0" v-for="(item, index) in preLineList" :key="index">
          <div class="pre-tr">
            <div class="pre-td pre-td-title flex-center f18 fw600">
              {{ item.title }}
            </div>
          </div>
          <div
            class="pre-tr fw600 text-333"
            style="background: rgb(250, 250, 250)"
          >
            <div class="pre-td pre-td-code text-center flex-center">
              <span class="cntext">{{ item.collegeEnrollCode || '-' }}</span>
            </div>
            <div class="pre-td pre-td-name pl20 flex-column">
              <p>
                <span class="cntext text-2121">{{
                  item.collegeName || '-'
                }}</span>
              </p>
            </div>
            <div class="pre-td pre-td-choose text-center flex-center">
              <span class="cntext">{{ item.enterNum || '-' }}</span>
            </div>
            <div class="pre-td pre-td-plan text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.chooseSubjectText || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-cose text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.maxScore || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-year text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.minScore || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-year text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.maxRank || '-'
              }}</span>
            </div>
            <div class="pre-td pre-td-year text-center flex-center">
              <span class="cntext" style="word-break: break-word">{{
                item.minRank || '-'
              }}</span>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="nodata">暂无数据</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  preLineList: {
    type: Array,
    default: () => [],
  },
  preLineData: {
    type: Object,
    default: () => {},
  },
  preLineSelectData: {
    type: Object,
    default: () => {},
  },
  isXiDingShow: {
    type: Boolean,
    default: () => false,
  },
});
watch(() => props.isXiDingShow);
const emits = defineEmits(['updatePreLine', 'updatePreLineProvince']);

const yearChange = (val) => {
  emits('updatePreLine', val);
};

const provinceChange = (val) => {
  emits('updatePreLineProvince', val);
};
</script>

<style lang="scss" scoped>
.xidingselect {
  position: fixed;
  width: 100%;
  background-color: #fff;
  top: 120px;
  z-index: 999;
}

.xidingtable-title {
  margin-top: 80px;
}

.select-box {
  padding: 20px 0px;
  //   background: rgb(255, 255, 255);
  //   position: sticky;
  //   top: 40px;
  //   left: 0;
}

.text-center {
  text-align: center !important;
}

.pre-head-tr {
  background: #fff;
  color: #333 !important;
}

.pre-tr {
  font-size: 14px;
  display: flex;
  border-right: 1px solid #ebeef5;
}

.pre-head-tr .pre-td:first-child {
  border-left: 1px solid #e8e8e8;
}

.pre-head-tr .pre-td {
  border-left: none;
  color: #86909c;
  padding: 9px 0;
  min-height: 35px;
  font-size: 12px;
}

.pre-td-code {
  width: 10%;
}

.pre-td {
  border-bottom: 1px solid #e8e8e8;
}

.pre-td-name {
  width: 60%;
}

.pre-td-choose,
.pre-td-cose,
.pre-td-plan,
.pre-td-year {
  width: 10%;
}

.pre-td-title.pre-td {
  padding: 10px 0;
  color: #4e5969;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pre-td-title {
  width: 100%;
  padding: 11px 5px;
}

.pre-td {
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 13px 5px;
  min-height: 48px;
}

.nodata {
  margin-top: 200px;
  text-align: center;
  font-size: 14px;
  color: #666666;
}
</style>
